<template>
  <div class="common-layout" style="height: 100%; width: 100%;">
    <el-container>
      <el-header>
        <Header/>
      </el-header>
     <el-container style="margin-top: 40px">
      <el-aside width="300px" >
        <Menu/>
        </el-aside>

       <el-main style="padding: 0;margin: 0">
         <div style="width: 90%; padding: 0;margin: 0">
<!--           <StudentHeader/>-->
           <StudentList/>
         </div>
       </el-main>
<!--       <div style="width: 30%;">-->
<!--         <el-calendar v-model="value" />-->
<!--       </div>-->
     </el-container>
    </el-container>
  </div>

</template>

<script lang="ts" setup>

import { ref } from 'vue'

import StudentList from "@/components/admin/StudentList.vue";
import Header from '@/components/admin/Header.vue'
import Menu from '@/components/admin/Menu.vue'


const value = ref(new Date())
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.router-link-active {
  text-decoration: none;
  color: #00CC7E;
}
a{
  text-decoration: none;
}
</style>